<template>
	<view class="content">
		<view class="banner-box">
			<u-swiper :list="info.slider_image" duration="1000" height="780" :circular="false"></u-swiper>
		</view>
		<view class="goods-info-box">
			<view class="goods-title-box">
				<text>{{ info.store_name }}</text>
			</view>
			<view class="goods-price-box">
				<text>{{ info.price }}积分</text>
			</view>
		</view>
		<view class="center-goods-info-box">
			<view class="tarbar-list-box">
				<u-tabs :list="list" item-width="240" active-color="#181818" height="50" inactive-color="#868686"
					:is-scroll="true" :current="current" @change="change"></u-tabs>
			</view>
			<view class="goods-img-box">
				<u-parse v-if="uparse" :html="uparse"></u-parse>
				<view v-else>暂无信息</view>
			</view>
		</view>
		<view class="comment-list-plate-box">
			<view class="title-box"><text>评价({{ info.evaluate.length }})</text></view>
			<block v-for="(item, index) in info.evaluate" :key="index">
				<view class="comment-item-plate-box">
					<view class="user-info-box">
						<view class="user-head-box">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view class="user-name-box">
							<text>{{ item.nickname }}</text>
							<u-rate disabled :count="count" size="25" active-color="#FCC526"
								v-model="item.star"></u-rate>
						</view>
					</view>
					<view class="user-comment-box">
						<text>{{ item.content }}</text>
					</view>
					<view class="user-img-box">
						<block v-for="(items, indexs) in item.image" :key="indexs">
							<image :src="items.path" @click.stop="showImg(items.path, item.image)" mode=""></image>
						</block>
					</view>
				</view>
			</block>
			<view class="more-but-box" @click="goAllComment" v-if="info.evaluate.length">
				<text>查看更多</text>
			</view>
			<view class="more-but-box" style="border: none;" v-else>暂无评论～</view>
			<!-- <empty v-else top="50" bottom="50" desc="暂无评论"></empty> -->
		</view>
		<view class="bottom-plates-box" @click="handleShow">
			<view class="bottom-buts-box">
				<text>立即兑换</text>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="20" height="750" duration="200">
			<!-- 弹框（） -->
			<view class="popup-plate-box">
				<view class="top-plate-box">
					<view class="left-img-box">
						<image :src="skuInfo.image || info.image" mode=""></image>
					</view>
					<view class="right-txt-box">
						<text class="pr">{{ skuInfo.price || info.price }}积分</text>
						<view class="guige-box" v-show="skuInfo.sku">
							规格：<text>{{ skuInfo.sku }}</text>
						</view>
						<view class="guige-box" v-show="skuInfo.sku">
							库存：<text>{{ skuInfo.stock }}</text>
						</view>
					</view>
					<view class="close-box" @click="handelClose">
						<image src="/pageCart/static/icon3.png" mode=""></image>
					</view>
				</view>
				<view class="center-plate-box">
					<view class="title-box">选择规格</view>
					<scroll-view scroll-y="true" class="specs-list-box">
						<view class="item-box">
							<view :class="skuIndex == index? 'skuActive' : ''" v-for="(item, index) in info.spec"
								:key="index" @click="chooseSku(index)">{{item.sku}}</view>
						</view>
					</scroll-view>
				</view>
				<view class="bottom-plate-box">
					<view class="buy-number-box">
						<text class="titles">购买数量</text>
						<view class="add-goods-box">
							<view class="reduce-box">
								<!-- <image :src="newItem.num==1?'/static/cart_icon/icon8.png':'/static/cart_icon/icon5.png'" mode=""></image> -->
								<image @click="chooseNum('reduce')"
									:src="`/static/cart_icon/icon${num <= 1? 8 : 5}.png`" mode=""></image>
							</view>
							<text class="value">{{ num }}</text>
							<view class="add-box">
								<!-- <image :src="newItem.num==newItem.kc?'/static/cart_icon/icon7.png':'/static/cart_icon/icon6.png'" mode=""></image> -->
								<image @click="chooseNum('add')"
									:src="`/static/cart_icon/icon${skuInfo.sku && (num < skuInfo.stock)? 6 : 7}.png`"
									mode=""></image>
							</view>
						</view>
					</view>
					<view class="but-box" @click="submitFun">立即兑换</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import empty from '@/components/custom/emtyp.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				id: '', // 商品ID
				info: {}, // 商品基本信息
				list: [{
						name: '产品介绍',
						id: 'introduction'
					},
					{
						name: '兑换须知',
						id: 'instruction'
					},
					{
						name: '规格介绍',
						id: 'specifications'
					}
				], // 富文本数组
				current: 0, // 选项卡选中
				show: false, // 规格弹窗
				skuIndex: null, // 选中的规格项
				num: 1, // 购买数量
				count: 5,
				value: 2,
			}
		},
		onLoad(option) {
			const {
				id
			} = option
			this.id = id || ''
			this.getInfo()
		},
		computed: {
			// 规格选中项
			skuInfo: function() {
				const {
					info,
					skuIndex
				} = this, {
					image,
					price,
					spec
				} = info
				let param = {}
				console.log('当前选中', skuIndex)
				if (skuIndex != null) {
					param = spec[skuIndex]
					// const { price: skuPrice, image: skuImage, sku } = spec[skuIndex]
					// param.price = skuPrice || price
					// param.image = skuImage || image
					// param.sku = sku
				} else {
					param.price = price
					param.image = image
					param.sku = ''
					param.stock = 0
				}
				this.num = param.stock ? 1 : 0
				return param
			},
			// 富文本
			uparse: function() {
				const {
					current,
					info,
					list
				} = this
				console.log(list[current].id)
				console.log(info[list[current].id])
				return info[list[current].id]
			},
		},
		methods: {
			handelClose() {
				this.show = false
			},
			handleShow() {
				this.show = true
			},

			// 选择规格
			chooseSku: function(index) {
				const {
					skuIndex
				} = this
				console.log(index)
				this.skuIndex = index == skuIndex ? null : index
			},
			// 获取商品详情
			getInfo: async function() {
				uni.showLoading({
					title: '加载中'
				})
				const {
					id
				} = this
				const {
					code,
					data,
					message
				} = await this.$u.api.getHallProductDetail({
					id
				})
				if (code == '1') {
					console.log('商品详情', data)
					data.slider_image.map(item => item.image = item.path)
					this.info = data
				} else {
					this.$showToast(message || '获取商品详情失败')
				}
			},
			// 购买数量
			chooseNum: function(type) {
				const {
					num,
					skuInfo
				} = this, {
					sku,
					stock
				} = skuInfo
				if (!sku) return
				if (type == 'add' && (num < stock)) {
					this.num += 1
				}
				if (type == 'reduce') {
					console.log(num)
					if (num <= 1) return
					this.num -= 1
				}
			},
			// 立即兑换
			submitFun: function() {
				console.log(this.skuInfo)
				const {
					skuInfo,
					id,
					num
				} = this, {
					unique,
					stock
				} = skuInfo
				console.log('立即兑换')
				if (!unique) {
					this.$showToast('请选择规格')
					return
				}
				if (!stock) {
					this.$showToast('库存不足')
					return
				}
				uni.navigateTo({
					url: `/pageCart/orderInfo/setHallOrder?product_id=${id}&unique=${unique}&number=${num}`
				})
			},
			// 选项卡change事件
			change(index) {
				this.current = index;
			},
			// 预览图片
			showImg: function(current, list) {
				const urls = list.map(item => item.path)
				uni.previewImage({
					urls,
					current
				})
			},
			// 前往更多评论
			goAllComment() {
				const {
					id
				} = this
				this.$gourl(`./hallAllComment?id=${id}`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: calc(100vh - 130rpx);
		overflow: hidden;
		overflow-y: auto;
		font-family: Microsoft YaHei;
		box-sizing: border-box;
		background: #F5F5F5;

		.goods-info-box {
			padding: 40rpx 20rpx;
			padding-bottom: 20rpx;
			background: #fff;
			font-weight: bold;
			color: #333333;
			margin-bottom: 20rpx;

			.goods-title-box {
				font-size: 42rpx;
				margin-bottom: 30rpx;
			}

			.goods-price-box {
				font-size: 32rpx;
				margin-bottom: 30rpx;
			}
		}

		.center-goods-info-box {
			background: #fff;
			margin-bottom: 20rpx;

			.tarbar-list-box {
				padding: 30rpx 0;
				display: flex;
				justify-content: center;
				box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.06);
			}

			.goods-img-box {
				width: 100%;
				padding: 40rpx 20rpx;

				// line-height: 0;
				image {
					width: 100%;
					height: 1112rpx;
					display: block;
					margin-bottom: 20rpx;
				}
			}

			.fwb-plate-box {
				padding: 20rpx;
				text-align: center;
			}
		}

		.comment-list-plate-box {
			padding: 30rpx 20rpx;
			background: #fff;

			.title-box {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}

			.comment-item-plate-box {
				padding: 40rpx 0;
				padding-bottom: 0;

				.user-info-box {
					width: 100%;
					display: flex;

					.user-head-box {
						flex: 0.13;
						line-height: 0;

						image {
							width: 70rpx;
							height: 70rpx;
							border-radius: 50rpx;
						}
					}

					.user-name-box {
						flex: 0.87;
						font-size: 26rpx;
						font-weight: bold;
						color: #333333;
						display: flex;
						flex-direction: column;
					}
				}

				.user-comment-box {
					padding: 20rpx 0;
					font-size: 26rpx;
					font-weight: bold;
					color: #333333;
				}

				.user-img-box {
					display: flex;
					flex-wrap: wrap;
					line-height: 0;

					image {
						width: 167rpx;
						height: 167rpx;
						border-radius: 10rpx;
						margin: 0 10rpx 10rpx 0;
					}
				}
			}
		}

		.more-but-box {
			border: 1rpx solid #000;
			width: 30%;
			margin: 40rpx auto;
			padding: 15rpx 20rpx;
			border-radius: 50rpx;
			font-size: 26rpx;
			font-weight: bold;
			color: #333333;
			text-align: center;
		}

		.bottom-plates-box {
			position: fixed;
			bottom: 0;
			z-index: 100;
			width: 100%;
			padding: 20rpx;
			background: #fff;

			.bottom-buts-box {
				width: 100%;
				padding: 25rpx 0;
				background: #000;
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				border-radius: 50rpx;
			}
		}

		.popup-plate-box {
			.top-plate-box {
				position: relative;
				display: flex;
				padding: 20rpx;

				.left-img-box {
					flex: 0.28;
					line-height: 0;

					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
					}
				}

				.right-txt-box {
					flex: 0.8;
					display: flex;
					flex-direction: column;
					align-self: center;
					color: #333333;

					.pr {
						margin-bottom: 20rpx;
						font-size: 32rpx;
						font-weight: bold;
					}

					.guige-box {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;

						text {
							color: #333333;
						}
					}
				}

				.close-box {
					line-height: 0;
					position: absolute;
					top: 20rpx;
					right: 20rpx;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.center-plate-box {
				padding: 20rpx;
				padding-bottom: 0;

				.title-box {
					padding: 0 0 20rpx 0;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}

				.specs-list-box {
					height: 250rpx;
					font-size: 24rpx;
					font-weight: 400;

					.item-box {
						width: 100%;
						display: flex;
						flex-wrap: wrap;

						view {
							padding: 18rpx 30rpx;
							background: #F5F5F5;
							margin: 0 20rpx 20rpx 0;
							border-radius: 10rpx;
						}
					}

					.skuActive {
						background: #111111 !important;
						color: white !important;
					}
				}

				.sele-shop-box {
					padding: 30rpx 0;
					padding-top: 0;
					border-bottom: 1rpx solid #EDEDED;
				}
			}

			.bottom-plate-box {
				position: fixed;
				bottom: 20rpx;
				width: 100%;
				padding: 0 20rpx 20rpx 20rpx;

				.buy-number-box {
					padding: 30rpx 0;
					display: flex;
					color: #333333;

					.titles {
						flex: 0.5;
						font-size: 28rpx;
						font-weight: bold;
					}

					.add-goods-box {
						flex: 0.5;
						display: flex;
						justify-content: flex-end;
						font-size: 30rpx;
						font-weight: 400;
						color: #393B42;

						.value {
							width: 80rpx;
							height: 50rpx;
							line-height: 50rpx;
							font-size: 30rpx;
							text-align: center;
						}

						.reduce-box {
							image {
								width: 50rpx;
								height: 50rpx;
							}
						}

						// .active{border: 1rpx solid #CCC !important; color: #CCC !important;}
						.add-box {
							image {
								width: 50rpx;
								height: 50rpx;
							}
						}
					}
				}

				.but-box {
					width: 100%;
					padding: 25rpx 0;
					border-radius: 50rpx;
					text-align: center;
					background: #000;
					color: #fff;
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>